<template>
	<!-- 收银台 -->
	<view class="checkstand-main">
		<!-- 金额 -->
		<view class="amountPaid">
			<view class="amountPaid-title">该金额由芦苇健康代收</view>

			<view class="amountPaid-pri">
				<text style="font-size: 34rpx; margin-right: 6rpx">￥</text>
				89.00
			</view>

			<view class="amountPaid-priTime">
				剩余支付时间
				<u-count-down :time="30 * 60 * 60 * 1000" format="HH:mm:ss" autoStart millisecond @change="onChange" style="margin: 0px 20rpx;">
					<view class="time">
						<view class="time__custom">
							<text class="time__custom__item">{{ timeData.hours > 10 ? timeData.hours : '0' + timeData.hours }}</text>
						</view>
						<text class="time__doc">:</text>
						<view class="time__custom">
							<text class="time__custom__item">{{ timeData.minutes }}</text>
						</view>
						<text class="time__doc">:</text>
						<view class="time__custom">
							<text class="time__custom__item">{{ timeData.seconds }}</text>
						</view>
					</view>
				</u-count-down>
				超时自动取消
			</view>
		</view>

		<!-- 支付类型 -->
		<view class="paymentType">
			<view class="type">
				<uni-icons type="weixin" size="28" style="margin-right: 8rpx"></uni-icons>
				<text>通联支付</text>
			</view>

			<view class="radio-change">
				<u-radio :labelDisabled="true"></u-radio>
			</view>
		</view>

		<!-- 立即支付 -->
		<view class="addAddress-btn">
			<u-button type="primary" color="red" text="立即支付" shape="circle" @click="gotoAddress"></u-button>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			timeData: {}
		};
	},
	methods: {
		onChange(e) {
			this.timeData = e;
		}
	}
};
</script>

<style scoped lang="scss">
.checkstand-main {
	box-sizing: border-box;
	padding: 0px 20rpx;
	.amountPaid {
		height: 260rpx;
		display: flex;
		align-items: center;
		flex-direction: column;
		justify-content: center;
		font-size: 28rpx;
		.amountPaid-title {
			color: #999;
		}
		.amountPaid-pri {
			font-size: 60rpx;
			margin: 15rpx 0px;
			font-weight: bold;
		}
		.amountPaid-priTime {
			color: #999;
			display: flex;
			justify-content: center;
			align-items: center;
			.time{
				display:flex;
				color:red;
			}
		}
	}

	.paymentType {
		box-sizing: border-box;
		padding: 10px 24rpx;
		height: 90rpx;
		background-color: #fff;
		border-radius: 24rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.type {
			display: flex;
			align-items: center;
		}
	}

	.addAddress-btn {
		position: absolute;
		bottom: 0rpx;
		left: 0px;
		width: 100%;
		height: 120rpx;
		display: flex;
		align-items: center;
		box-sizing: border-box;
		padding: 0px 20rpx;
		background-color: #fff;
	}
}
</style>
